<template>
    <div class="header">
       <div class="header-left">
           <div class="iconfont back-icon" >&#xe61c;</div>
       </div>
       <div class="header-input">
           <span class="iconfont ">&#xe603;</span>
           请输入城市/景点/游玩主题
       </div>
       <router-link to="/city">
       <div class="header-right">
          <!-- {{this.$store.state.city}} -->
          {{this.city}} 
          <!-- vuex高级用法mapState，简化代码， -->
           <span class="iconfont select-icon">&#xe7ff;</span>
       </div>
       </router-link>
    </div>
</template>

<script>
import { mapState} from 'vuex'
//引入mapState
export default {
    name : 'HomeHeader',
    
    computed : {
        ...mapState(['city'])//展开运算符
    },//将vuex中的city这个数据映射到名为city的计算属性中
    props : {
       
    }
}
</script>

<style lang="stylus" scoped>
.header{
    display :flex;
    background-color :#00bcd4;
    height : 44px;

        .header-left{
            width : .64rem;
            float: left ;
            font-size: 30px;
            color : white;
            
            .back-icon{
                font-size :20px;
                text-align :center;
                line-height :44px;
                margin-left 4px;
            }
            
        }
        .header-input{
            line-height :30px;
            flex: 1
            background #ffffff;
            border-radius :.2rem;
            height : 30px;
            margin-top : 7px;
            margin-left : 20px;
            font-size :14px;
            color :#ccc;
            padding-left :12px;
        }
        .header-right{
            min-width : 4.6rem;
            padding 0rem .1rem 0rem .4rem
            float : right;
            text-align :center;
            line-height :40px;
            font-size :14px;
            color:white;
            .select-icon{
                font-size :20px;
                margin-left :-2px;
            }
        }
}
</style>
